<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

 </style>
 <script src="./jquery-3.6.1.js"></script>
 <!-- <script src="./030Ajax.解析.js"></script> -->
</head>
<body>
  <h1>萝卜</h1>
   <form name = "userForm" id = "userForm">
    <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" name="username" id="username">
    </div>
    <div class="form-group">
      <label for="password">密码</label>
      <input type="password" class="form-control" name="password" id="password">
    </div>
    <div class="form-group">
      <label for="telphone">电话</label>
      <input type="text" class="form-control" name="telphone" id="telphone">
    </div>
    <div style="margin-bottom: 20px;" class="text-center">
      <input type="button" id="submit" value="提交">
    </div>
  
   <label for="file">文件</label><input name="file" type="file" multiple id="file">
  </form>
  <button id="send" type="button">发送</button>

   <script>
    let send = document.querySelector("#send")
    let file = document.querySelector("#file");
    let formData = new FormData();
    send.addEventListener("click",async()=>{
      console.log(file.files[0])
      formData.append("姓名","turnip")
      formData.append("文件",file.files[0]);
      $.ajax({
        type:"post",
        url:"http://127.0.0.1:3000/turnip",
        contentType:false,
        processData:false,
        dataType:"json",
        data:formData,
        success(res){
            console.log(res)
        },
        complete(res){
          console.log("成功");
        },
        error(err){
          console.log("err:",err)
        }

      })

    })
   </script>





  <!-- <script>
var buildJSONP = function () {    // 输入参数——学号  
    var studentNo = 1111;   
     // 请求参数，其中包含回调函数   
      var param = 'studentNo=' + studentNo + '&callback=successFn';
          // 请求的url    
          var url = 'http://localhost:3000/?'+param;  
            var script = document.createElement('script');  
              script.src = url;  
                document.body.appendChild(script);};
                buildJSONP();
  </script> -->
  <button id="btn" type="button" style="margin-left: 300px;">jQuery</button>
  <button id="btn1" type="button" style="margin-left: 300px;">序列化</button>
</body>
</html>
<script>
  $("#btn1").click(()=>{

   let result1 = $("#userForm").serialize();

   let result2 = $("#userForm").serializeArray()


   console.log(result1)
   console.log(result2)
  })
</script>



<!-- 

<script>
  $("#btn").click(()=>{
    $.ajax({
    type:"post",
    url:"http://127.0.0.1:3000/turnip",
    contentType:"application/json;charset=UTF-8",
    // dataType:"application/json;charset=UTF-8"
    data:JSON.stringify({name:"turnip",code:123}),
    success:function(res){
      console.log(res)
    },
    complete:function(rss){
      console.log("完成")
    },
    error:function(err){
      console.log("函数执行失败,err:",err)
    }
  })
  })

</script>




 -->
